<template>
  <div class="bg">
    <nav-com
        title="营销工具"
        :showView='showView'
        @back="backHandler()"
    >
      <div class="right" style="display: flex;justify-content: center;align-items: center;height: 90%;" slot="right">
        <img src="../../assets/addshop.png" alt="" style="width: 7.2vw;height: 7.2vw;">
      </div>
    </nav-com>
    <van-pull-refresh
        v-model='isLoading'
    >
      <div
          v-for="(item,itemIndex) in list"
          :key="itemIndex"
          class="orders_list"
      >
        <div
            class="order_box"
            @click="toshopDetail(item.id)"
        >
          <div class="left">
            <img :src="item.imgurl">
            <p style="width: 90%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical" >{{item.title}}</p>
          </div>
          <div style=" width: 100%;" :style="{background:'url('+item.bg_url+') no-repeat', 'min-height': '26vh',
    'background-size': '110% 110%',
    'background-position-x': '62%'}">
            <div class="rightcontent">
              <span class="subtitles">{{item.subtitle }}</span>
              <div class="order_bottom">{{item.content}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import {
  getOrders,
  goodslistUser,
  cancelOrderApi,
  putselfWithdrawal,
  orderConfirm,
} from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from "vant";
export default {
  name: "orders",
  components: {
    navCom,
  },
  data() {
    return {
      radio: "",
      cancelReason: false,
      cancelReasonList: [
        { name: 0, title: "不想要了" },
        { name: 1, title: "地址填写错误" },
        { name: 2, title: "商品降价" },
        { name: 3, title: "商品错选/多选" },
      ],
      uid: weixin.getUserId(),
      showView: true,
      active: 1,
      tabList: [
        { id: 0, title: "待支付" },
        { id: 1, title: "待发货" },
        { id: 2, title: "待收货" },
        { id: 3, title: "已完成" },
      ],
      list: [
        { id: 0, title: "友聊私域 流量助手",subtitle:'友聊私域流量助手介绍',content:'友聊私域流量助手介绍，友聊私域流量助手介绍友聊私域流量助手介绍友聊私域流量助手介绍友聊私域流量助手介绍友聊私域流量助手介绍。',imgurl:require('../../assets/myserive/xindiantu.png') ,bg_url:require('../../assets/myserive/xindiantubg.png') },
        { id: 1, title: "抖音公域",subtitle:'抖音公域介绍',content:'敬请期待。。。',imgurl:require('../../assets/myserive/douyin.png'),bg_url:require('../../assets/myserive/douyinbg.png')  },
        { id: 2, title: "商学院",subtitle:'商学院介绍', content:'敬请期待。。。',imgurl:require('../../assets/myserive/xuewei.png'),bg_url:require('../../assets/myserive/xueweibg.png')  },
        { id: 3, title: "盈利计算",subtitle:'盈利计算介绍', content:'敬请期待。。。',imgurl:require('../../assets/myserive/jisuanqi.png'),bg_url:require('../../assets/myserive/jisuanqibg.png')  }],
      isLoading: false,
      shop_id:5
    };
  },
  filters: {
    /*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
    formatDateTime: function (date) {
      var date = new Date(date * 1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate =
          date.getFullYear() +
          "-" +
          month +
          "-" +
          strDate +
          " " +
          Hours +
          ":" +
          Minutes +
          ":" +
          Seconds;
      return currentDate;
    },
  },
  mounted() {
  },
  methods: {
    toshopDetail(item){
      this.$router.push({
        name: "yingxiaoDetail",
        params: {
          id: item,
        },
      });
    },
    //返回
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    }
  },
};
</script>
<style scoped>
p {
  padding: 0;
  margin: 0;
}
.bg {
  background: linear-gradient(180deg, #FAE0DF 0%, #F8F9F4 100%);;
  min-height: 100vh;
}
.orders_list {
  position: relative;
  margin:11vw 4vw;
  border-radius: 10px;
}
.order_box_title {
  height: 9.3vw;
  font-size: 3.2vw;
  padding-left: 2.93vw;
  line-height: 9.3vw;
  color: #999;
  border-bottom: 1px solid #EEEEEE;
}
.order_box {
  display: flex;
  padding-bottom: 10px;
  position: relative;
}
.order_box p {
  padding-top: 3.3vw;
  color: #333;
  text-align: center;
}
.order_box span {
  padding: 16px 8px;
  display: block;
  color: #ff0000;
  font-size: 18px;
  position: absolute;
  top: -23px;
}
.order_bottom {
  padding: 2vw 2.93vw;
  margin-top: 35px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #300000;
  line-height: 26px;
}
.order_ab {
  position: absolute;
  right: 4vw;
  bottom: 17vw;
  width: 22.66vw;
  height: 7vw;
  line-height: 7vw;
  text-align: center;
  border-radius: 1.3vw;
  font-size: 3.2vw;
  background: #fe4b20;
  color: #fff;
}
.empty {
  margin-top: 29.33vw;
  text-align: center;
}
.empty img {
  width: 54.4vw;
  height: 37.6vw;
}
.empty p {
  font-size: 3vw;
  color: #333;
  margin-top: 4vw;
}
.popup {
  margin: 5vw 6vw;
}
.popup-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 2vw 0;
}
.popup-tip {
  background: #f9f9f9;
  padding: 3vw;
  line-height: 7vw;
  color: #737373;
}
.cancel-reason {
  line-height: 15vw;
}
.cancel-reason .cancel-title {
  font-size: 18px;
}
.cancel-reason .list {
  margin: 2vw 0;
  color: #737373 !important;
}
.van-radio__label {
  color: #737373 !important;
}
.popup-button {
  height: 5vh;
  background: #fe4b20;
  color: #fff;
  font-size: 20px;
  width: 80vw;
  margin: 0vh auto;
  line-height: 5vh;
  text-align: center;
  border-radius: 2.5vh;
}
.van-tabs__nav--line {
  width: 100vw;
}
.back_box {
  background: #fff !important;
}
.dfk{
  display: flex;
  background-image: url('../../assets/ddfk.png');
  background-repeat: no-repeat;
  background-size: 135px 20px;
  min-width: 135px;
  background-position: center center;
  justify-content: flex-end;
  font-size: 10px;
  padding-right: 10px;
  color: #FE4B20;
}
.order_box .yushou{
  position: absolute;
  top: -20px;
  left: -16px;
  width: 60px;
  height: 60px;
}
.left{
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #694C4C;
  line-height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30vw;
}
.left img{
  width: 14vw;
  height: 14vw;
  padding-top: 3.3vw;
  padding-left: 2.93vw;
}
.rightcontent{
  font-size:12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
 text-align: center;
  flex-direction: column;
  position: relative;
}
.subtitles{
  width: 78%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  background: url('../../assets/myserive/juxing.png') no-repeat;
  background-size: 100%;
}
.order_bottom{
  text-align: initial!important;
  width: 85%;
}
</style>
